<template>
    <div>
    <div>
    <ul>
    <li v-for="(i,index) in userlist" :key="index">
    <van-button @click="changeuser(i)" type="primary">{{i}}</van-button>
    </li>
    </ul>
    <ul>
    <li v-for="(i,index) in meslist" :key="index">{{i}}</li>
    </ul>
    </div>
    <div>
    <van-field v-model="mes"/><van-button @click="submit">发送</van-button>
    </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              mes:'',
              meslist:[],
              userlist:[],
              ws:'',
              user:''
          }
      },
      methods: {
          changeuser(id){
              this.user = id
          },
          conn(){
              this.ws = new WebSocket("ws://localhost:8000/sockconn?id=kefu")
              this.ws.onopen=()=>{
                  this.ws.send(JSON.stringify({"send":"conn","mes":"conn"}))
              }
              this.ws.onmessage=(res)=>{
                  var data = JSON.parse(res.data)
                  this.meslist.push(data.meslist)
                  this.userlist = data.userlist
              }
          },
          submit(){
              if (this.user !=""){
                   var mm = "客服说:"+this.mes
                   this.ws.send(JSON.stringify({"send":this.user,"mes":mm}))
              }else{
                  alert("请选择要聊天的用户")
              }
          }
      },
      mounted() {
          this.conn()
      },
  }
  </script>
  
  <style>
  
  </style>